<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form ref="formRef" layout="vertical" :model="formState" :rules="rules" @finish="handleSubmit">
        <div class="option-column">
          <div class="column-title">经销商基础信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="经销商名称" name="name">
                <a-input
                  v-model:value="formState.name"
                  placeholder="请输入经销商名称"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="经销商编号" name="no">
                <a-input
                  :disabled="true"
                  v-model:value="formState.no"
                  placeholder="(自动生成)"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="所在地区">
                <a-cascader
                  v-model:value="formState.city_id"
                  :options="zoneoList"
                  placeholder="请选择所在地区"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="详细地址" name="adress">
                <a-input
                  v-model:value="formState.address"
                  placeholder="请输入详细地址"
                />
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">联系人信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="姓名">
                <a-input
                  v-model:value="formState.contact.name"
                  placeholder="请输入联系人姓名"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="职务">
                <a-input
                  v-model:value="formState.contact.duty"
                  placeholder="请输入职务"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="手机号">
                <a-input
                  v-model:value="formState.contact.mobile"
                  placeholder="请输入联系人手机号"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="联系电话">
                <a-input
                  v-model:value="formState.contact.tel"
                  placeholder="请输入联系人电话"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="电子邮箱">
                <a-input
                  v-model:value="formState.contact.email"
                  placeholder="请输入联系人电子邮箱"
                />
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" htmlType="submit"
            >保存</a-button
          >
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import API from "@/api/operation";
import SAPI from "@/api/system";
import router from "@/routers";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import { getCityId } from "@/utils/city.ts";
const route = useRoute();
const query = computed(() => route.query);
onMounted(async () => {
  await getZoneData();
  if (query.value.id) {
    getData();
  }
});
const formRef = ref(null);
const formState = ref({
  name: "",
  no: "",
  city_id: [],
  address: "",
  enabled: true,
  contact: {
    dealer_id: "",
    name: "",
    duty: "",
    mobile: "",
    tel: "",
    email: ""
  }
});
const zoneoList = ref([]);
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入客户名称",
      trigger: "blur",
    },
  ],
  no: [
    {
      required: query.value && query.value.id ? true : false
    },
  ],
  class: [
    {
      required: true,
      message: "请选择客户分类",
      trigger: "change",
    },
  ],
});
// 获取地区数据
const getZoneData = async () => {
  const res = await SAPI.CityCityTree();
  zoneoList.value = res;
};
// 获取页面详情数据并还原
const getData = async () => {
  const res = await API.DealerFetchModel({
    dealer_id: query.value.id,
  });
  formState.value = {
    name: res.name,
    no: res.no,
    city_id: formState.value.city_id = getCityId(zoneoList.value, res.city_id),
    address: res.address,
    enabled: res.enabled,
    contact: {
      name: res.dealer_contacts ? res.dealer_contacts.name : '',
      duty: res.dealer_contacts ? res.dealer_contacts.duty : '',
      mobile: res.dealer_contacts ? res.dealer_contacts.mobile : '',
      tel: res.dealer_contacts ? res.dealer_contacts.tel : '',
      email: res.dealer_contacts ? res.dealer_contacts.email : ''
    }
  };
}
// 提交表单
const handleSubmit = () => {
  formRef.value.validate().then(async () => {
    console.log(formState.value);
    if (query.value && query.value.id) {
      //编辑
      let params = {
        dealer_id: query.value.id,
        city_id: formState.value.city_id && formState.value.city_id.length > 0 ? formState.value.city_id[1] : '',
        address: formState.value.address,
        name: formState.value.name,
        no: formState.value.no,
        enabled: formState.value.enabled,
        dealer_contacts: formState.value.contact
      }
      const res = await API.DealerUpdate(params);
      if (res) {
        formRef.value.resetFields();
        //提示编辑成功
        message.success("编辑成功");
        //后退
        router.go(-1);
      }
    } else {
      //新增
      let params = {
        dealer_id: '',
        city_id: formState.value.city_id && formState.value.city_id.length > 0 ? formState.value.city_id[1] : '',
        address: formState.value.address,
        name: formState.value.name,
        no: formState.value.no,
        enabled: true,
        dealer_contacts: formState.value.contact
      }
      const res = await API.DealerCreate(params);
      if (res) {
        formRef.value.resetFields();
        //提示新增成功
        message.success("新增成功");
        //后退
        router.go(-1);
      }
    }
  })
};
// 取消
const resetForm = () => {
  formState.value = {
    name: "",
    no: "",
    zone: "",
    adress:"",
    contact: {
      name: "",
      duty: "",
      mobile: "",
      tel: "",
      email: ""
    }
  };
  router.go(-1);
};
</script>

